<route lang="json5" type="page">
	{
	  style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '',
	  },
	}
</route>
<template>
	<view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">

		<view class="main-title-head  flex flex-row flex-justify-center"
			style="letter-spacing: 1px;align-items: center;position: relative;">
			<i class="iconfont icon-jiantou" style="position: absolute;left: 20px;color: #F4F6F9;" @click="goLast"></i>
			<p class="font-550" style="color: aliceblue;left: 0;">晚签看板</p>
		</view>



		<view class="w-100% flex flex-col" style="align-items: center;">


			<view class="w-87% flex flex-justify-between" style="height: 6vh;align-items: center;margin-top: 2vh;">

				<p style="font-size: 18px;font-weight: 700;margin-left: 1vh;">日期选择器</p>
				<picker mode="date" :value="date" fields="day" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<p class="uni-calendar__header-text" style="text-align: center;font-weight: 600;">
						{{ date }}
						<span style="font-size: 15px;color: grey;">></span>
					</p>
				</picker>

			</view>


			<view class="w-87% clockInRecords flex flex-justify-center" style="height: 16vh;flex-direction: column;">

				<p class="font-600 font-size-5"
					style="height: 30%;text-align: start;margin-left: 35rpx;margin-bottom: 20rpx;">所管理班级</p>

				<view class="flex flex-row w-100% flex-justify-around">
					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-5" style="text-align: center;">270</p>
						<p style="color: gray;text-align: center;font-weight: 600;">在校住宿</p>
					</view>

					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-5" style="text-align: center;">12</p>
						<p style="color: gray;text-align: center;font-weight: 600;">外出住宿</p>
					</view>

					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-5" style="text-align: center;">18</p>
						<p style="color: gray;text-align: center;font-weight: 600;">走读学生</p>
					</view>
				</view>

			</view>

			<view class="flex flex-row w-87% flex-justify-around" style="margin-bottom: 1vh;margin-top: 1vh;">
				<p v-for="(status, index) in statuses" :key="index" :class="{ 'p-active': activeIndex === index }"
					@click="setActive(index)" style="color: gray; text-align: center; font-weight: 600;">
					{{ status }}
				</p>
			</view>

			<view class="flex flex-col w-88%" style="margin-top: 1vh;">

				<p class="font-600 font-size-4" style="margin-bottom: 2.5vh;color: #2B98FF;text-align: center;">复制学号姓名
				</p>


				<!-- 学生详情 -->
				<!-- 已签到 -->
				<view class="w-100% flex flex-col">

					<!-- 组件 -->
					<view v-for="(student, index) in students" :key="index" class="flex flex-row flex-justify-between"
						style="align-items: center; margin-bottom: 2vh;"
						@click="openPopup(student.name, student.id, student.class)">

						<view class="w-70% flex flex-col">
							<p class="font-600" style="margin-bottom: 10rpx;">{{ student.name }} {{ student.id }}</p>
							<p>{{ student.class }}</p>
						</view>

						<!-- <view v-if="activeStatus !== '未签到'"
							:class="['flex', 'flex-justify-center', { 'signedIn': activeStatus !== '未签到', 'notCheckedIn': activeStatus === '未签到' }]"
							style="align-items: center;" @click="openPopup(student.name, student.id, student.class)">{{
								activeStatus }}
						</view> -->

						<view
							:class="['flex', 'flex-justify-center', { 'signedIn': activeStatus !== '未签到', 'notCheckedIn': activeStatus === '未签到' }]"
							style="align-items: center;"
							@click="supplementarySignature(student.id, student.name, student.class)">{{
								activeStatus }}
						</view>

					</view>

				</view>
			</view>

		</view>
		<!-- 弹窗-签到记录 -->
		<wd-popup v-model="isHistroyShow" position="bottom"
			custom-style="height: 68vh;background-color: #FFFFFF;border-top-right-radius: 10rpx;border-top-left-radius: 10rpx;"
			v-if="isHistroyShow">
			<view class="popup-view" style="margin-top: 0;">
				<p class="font-550 border-gary w-100% pa-3" style="font-size: large;text-align: center;">签到记录</p>

				<view class="border-gary w-100%">
					<view class="pa-5">
						<view class="flex flex-row" style="margin-bottom: 15rpx;">
							<p style="margin-right: 20rpx;">姓名：{{ stuName }}</p>
							<p>学号：{{ stuId }}</p>
						</view>
						<p style="margin-bottom: 15rpx;">班级：{{ stuCla }}</p>
						<p style="margin-bottom: 15rpx;">手机号：18305928581</p>
						<p>宿舍：西区学生公寓3#506A-C</p>
					</view>
				</view>
				<!-- 签到状态 -->
				<view class="w-100%">
					<view class="pa-5">
						<p style="margin-bottom: 15rpx;">签到状态：已签到</p>
						<p style="margin-bottom: 15rpx;">签到时间：{{ clockInDate }} 16:47:25</p>
						<p style="margin-bottom: 15rpx;">签到地点：福州市鼓楼区杨桥西路50号</p>
						<p style="margin-bottom: 15rpx;">签到图片：</p>

						<img src="../../static/images/background.png" alt="">
					</view>
				</view>

				<p class="font-550 w-100%" style="font-size: large;text-align: center;color: #5D9CF8;"
					@click="closeHistory">收起</p>
			</view>
		</wd-popup>

		<wd-popup v-model="supplementarySignaturePopup" v-if="supplementarySignaturePopup" custom-style="padding: 20px 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 65%;
			height: 21vh;
			border-radius: 15rpx;">

			<h3 style="text-align: center;margin-bottom: 2vh;">选择补签状态</h3>
			<radio-group @change="radioChange" style="margin-bottom: 2vh;">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
					style="display: flex;flex-direction: row;margin-bottom: 15rpx;font-weight: 600;">
					<view class="">
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</radio-group>

			<view class="flex flex-row w-87% flex-justify-around" style="text-align: center;font-weight: 600;">
				<h3 @click="cancelTheSupplementaryVisa">取消</h3>
				<h3 @click="confirmTheSupplementaryVisa" style="color: #3BCA39;">确认</h3>
			</view>
		</wd-popup>

	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';

// 定义一个响应式变量来存储当前激活的索引  
const activeIndex = ref(0);
let activeStatus = ref<string>("已签到")
let clockInDate = ref<string>("2024年09月01日")
// 签到记录是否开启
let isHistroyShow = ref<boolean>(false)
// 补签弹窗
let supplementarySignaturePopup = ref<boolean>(false)


// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 定义类型  
type DateString = string;
const date = ref<DateString>(getDate({ format: true }));


// 计算属性  日期
const startDate = computed<DateString>(() => getDate('start'));
const endDate = computed<DateString>(() => getDate('end'));

// 签到状态数组  
const statuses = ref(['已签到', '未签到', '校外签到', '走读签到']);

// 补签状态
const items = reactive([
	{
		value: '1',
		name: '未签到但在校',
		checked: 'true'
	},
	{
		value: '2',
		name: '未签到且在外'
	},
	{
		value: '3',
		name: '未签到且走读'
	},
])

// 当前选中的补签状态
const current = ref<number>(0)
const currentSupplementStuNum = ref<number>(212106271)

// 详情弹窗
let stuName = ref<string>()
let stuCla = ref<string>()
let stuId = ref()


const students = ref([
	{ name: '李涛一', id: '21230666', class: '2023级软件工程01班' },
	{ name: '李涛二', id: '21230666', class: '2023级软件工程02班' },
]);


// 定义一个方法来更新激活的索引  
function setActive(index: number) {
	activeIndex.value = index;
	activeStatus.value = statuses.value[activeIndex.value];
	console.log(activeStatus.value);

	// 根据不同的状态 调用接口 获取结果替换掉students
}



function bindDateChange(e: any) {
	date.value = e.detail.value;
}

// 辅助函数  
function getDate(type?: 'start' | 'end' | { format: boolean }): DateString {
	const date = new Date();
	let year = date.getFullYear();
	let month = String(date.getMonth() + 1).padStart(2, '0');
	let day = String(date.getDate()).padStart(2, '0');

	if (typeof type === 'string') {
		if (type === 'start') {
			year -= 60;
		} else if (type === 'end') {
			year += 2;
		}
	} else if (type && type.format) {
	}

	return `${year}-${month}-${day}`;
}



const goLast = () => {
	uni.navigateBack({
		delta: 1
	});
}

// 弹窗
// 打开晚签详情
const openPopup = (name: string, id: any, cla: string) => {
	console.log("打开弹窗：当前状态", activeStatus.value);

	if (activeStatus.value === '未签到') {
		return;
	}
	stuName.value = name;
	stuId.value = id;
	stuCla.value = cla;
	isHistroyShow.value = true;
}

// 关闭晚签详情
const closeHistory = () => {
	isHistroyShow.value = false;
}

// 补签
const supplementarySignature = (stuId, name?, cla?) => {
	// console.log(activeStatus.value);
	console.log("打开弹窗：补签", activeStatus.value);
	if (activeStatus.value != '未签到') {
		// isHistroyShow.value = true;
		// openPopup(name, stuId, cla)
	} else {
		// isHistroyShow.value = false;
		currentSupplementStuNum.value = stuId;
		supplementarySignaturePopup.value = true;
		console.log("补签");
	}
}

// 补签状态选择
const radioChange = (evt) => {
	for (let i = 0; i < items.length; i++) {
		if (items[i].value === evt.detail.value) {
			current.value = i;
			break;
		}
	}
}

// 取消补签
const cancelTheSupplementaryVisa = () => {
	supplementarySignaturePopup.value = false;
}

// 确认补签
const confirmTheSupplementaryVisa = () => {
	supplementarySignaturePopup.value = false;
	console.log("补签状态", items[current.value]);
	console.log("补签学号", currentSupplementStuNum.value);
}
</script>

<style scoped>
.border-gary {
	border-bottom: 1px solid rgba(128, 128, 128, 0.131);
}


.main-title-head {
	/* width: 746rpx; */
	height: 5.7vh;
	background: linear-gradient(to right, #2B87F6, #2B71F6);
	box-shadow: 0 5px 5px -5px rgba(42, 127, 177, 0.5), 0 8px 10px -5px rgba(24, 54, 72, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	padding: 12rpx 0 12rpx 38rpx;
}

.wid {
	width: 746rpx;
}

.wid>img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}

.clockInRecords {
	border: 0.5px solid rgba(178, 175, 175, 0.224);
	border-radius: 20rpx;
	height: 9vh;
	margin-top: 1.1vh;
	margin-bottom: 1.5vh;
	box-shadow: 1px 1px 3px -2px rgba(131, 136, 138, 0.5), 2px 2px 5px 1px rgba(179, 194, 203, 0.5);
	display: flex;
	flex-direction: row;
}

.p-active {
	font-size: 17px;
	margin-top: -1px;
	color: #2B98FF !important;
}

.clockInRecords p {
	text-align: center;
}

.signedIn {
	border-radius: 40rpx;
	height: 70rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	background-color: rgb(41, 167, 41);
	color: #fff;
}

.notCheckedIn {
	border-radius: 40rpx;
	height: 70rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	background-color: #C73636;
	color: #fff;
}

.popup-view {
	margin-top: 7vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popup-view p {
	text-align: start;
	letter-spacing: 1px;
	font-weight: 550;
}

.popup-view img {
	width: 100%;
	height: 22vh;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10rpx;
}

.SignaturePopup {
	padding: 30px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	height: 15vh;
	border-radius: 15rpx;
}
</style>
